<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TUI Calendar</title>
  <link rel="stylesheet" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css">
  <script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
</head>
<body>
  <div id="calendar" style="height: 800px;"></div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendar = new tui.Calendar('#calendar', {
        defaultView: 'month',
        taskView: true,
        scheduleView: true,
        useCreationPopup: true,
        useDetailPopup: true,
      });

      calendar.createSchedules([
        {
          id: '1',
          calendarId: '1',
          title: '预约提醒',
          category: 'time',
          dueDateClass: '',
          start: '2023-10-15T10:30:00+09:00',
          end: '2023-10-15T12:30:00+09:00',
        },
        {
          id: '2',
          calendarId: '1',
          title: '记录',
          category: 'time',
          dueDateClass: '',
          start: '2023-10-16T10:30:00+09:00',
          end: '2023-10-16T12:30:00+09:00',
        },
      ]);
    });
  </script>
</body>
</html> 